<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法3 v-bind 属性绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：html插值</h1>
            <h3>html插值可以动态地渲染DOM节点，常用来处理开发者不可预知和难以控制的DOM结构
                但它很容易形成漏洞被黑客攻击
            </h3>
            <span v-html="vh"></span>
        <h1>知识点2：v-pre</h1>
            <h3>v-pre可以跳过其所在节点的编译过程，可以利用它跳过没有指令语法和插值语法的节点，加快编译速度</h3>
            <span v-pre>{{price}}</span>
        <h1>知识点3：v-bind 属性绑定</h1>
            <h3>1.文本插值不能在html元素的属性中使用，如果想要动态地改变属性，可以使用v-bind</h3>
            <p>例子1：没有使用v-bind</p>
            <p title={{title}}>我没有进行属性绑定，请不要碰我！</p>
            <h3>2.v-bind可以绑定变量、表达式、执行函数等</h3>
            <p>例子2：使用v-bind</p>
            <p v-bind:title="title">我进行属性了绑定，这样我的属性内容就可以进行调整了！惊不惊喜？！</p>
            <p>例子3：图片的动态绑定</p>
            <img v-bind:src="srcImg" alt="">
            <p>例子4：绑定变量和表达式</p>
            <button v-bind:disabled="10+10==30">点击有奖</button>
            <h3>3.因为v-bind使用非常非常多，所以v-bind可以简写为：</h3>
            <p :title="title">我是简写的属性绑定</p>
            <h3>课堂实例：通过改变type值，来实现文本框，复选框和单选框的切换</h3>
            <input type="text">
            <input type="radio">
            <input type="checkbox">
            <h4>代码实现如下：</h4>
            <input :type="type">
            <button @click="change('text')">文本框</button>
            <button @click="change('radio')">单选框</button>
            <button @click="change('checkbox')">复选框</button>
            <h3>课堂小练习：通过动态改变属性，实现字体大小、颜色的改变</h3>
            <span :style="{color:color,fontSize:size + 'px'}">我是一行等待改变的文字</span>
            <button @click="colorChange('blue')">蓝色</button>
            <button @click="colorChange('pink')">粉色</button>
            <button @click="colorChange('yellow')">黄色</button>
            <button @click="colorChange('orange')">橙色</button>
            <button @click="sizeChange(25)">字体变大</button>
            <button @click="sizeChange(8)">字体变小</button>
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                vh:"<span style='color:red'>我是红色的</span>",
                price:10000,
                title:'别碰我！！！！！',
                srcImg:'./蜜蜂.png',
                type:'text',
                color:'black',
                size:16
            }
        },
        methods: {
            change(val){
                this.type = val
            },
            colorChange(val){
                this.color =val
            },
            sizeChange(val){
                this.size =val
            }
        },
    }).mount("#app")
</script>